const Shape = require("./shape.js")
const Utils = require("./utils.js")
const {CN,EN,WEB} = require("./constant.js")

module.exports = class Grid extends Shape{
	constructor($env,$event){
		super($env,$event)
		this.grid = {
			lineWidth:1,
			fillStyle:WEB.theme,
			strokeStyle:"#000000",
			font:"24px sans-serif",
			span:this.ratio*2,
			div:10*2,
			imageSmoothingEnabled : true,
			globalAlpha:0.5
		}

		this.$event = $event;
		this.active = false;
		this.__isInPath = false

		this.$dom = Utils.createDOM("div",{
			id:"grid-action-wrap",
			class:`grid-action-wrap draw-plugin-wrap`
		})

		this.$dom.innerHTML = `<button title="显示网格" class="action-btn iconfont icon-grid"></button>`

		$event.emit(EN.plugin_append,this.$dom);

		this.cvs=Utils.createDOM("canvas",{
			id:"draw-grid-cvs",
			class:"draw-grid-cvs"
		})
		$event.emit(EN.prepend,this.cvs)

		this.bind()
	}
	bind(){
		this.$event.on("canvas-resize",(w,h)=>{
			if(!this.active)return;
			this.drawGrid(w,h)
		})
		this.$dom.addEventListener("click",(e)=>{
			let t = e.target;
			if(t.tagName==="BUTTON"){
				if(this.active){
					t.classList.remove("active")
					this.cvs.classList.remove(CN.show)
					this.active = false;
				}else{
					t.classList.add("active")
					this.active = true;
					let {w,h} = this.documentRect()
					this.drawGrid(w,h)
					this.cvs.classList.add(CN.show)
				}
			}
		})
	}
	drawGrid(width,height){
		this.cvs.width = width*2
		this.cvs.height = height*2
		let ctx = window.pctx=this.cvs.getContext("2d")
		let grid = this.grid
		ctx.save()
		//-0.5 的目的修复线条模糊 粗细不一
		ctx.translate(width-0.5,height-0.5)

		ctx.globalAlpha = grid.globalAlpha;
		ctx.strokeStyle = grid.strokeStyle;
		ctx.lineWidth = grid.lineWidth
		ctx.imageSmoothingEnabled = grid.imageSmoothingEnabled
		//draw grid line
		ctx.save()
		ctx.strokeStyle = grid.strokeStyle+"22"
		for(let i=0;i<width;i+=grid.div){
			ctx.beginPath()
			ctx.moveTo(i,-height)
			ctx.lineTo(i,height)
			ctx.closePath()
			ctx.stroke()
			ctx.beginPath()
			ctx.moveTo(-i,-height)
			ctx.lineTo(-i,height)
			ctx.closePath()
			ctx.stroke()
		}
		for(let i=0;i<height;i+=grid.div){
			ctx.beginPath()
			ctx.moveTo(-width,i)
			ctx.lineTo(width,i)
			ctx.closePath()
			ctx.stroke()
			ctx.beginPath()
			ctx.moveTo(-width,-i)
			ctx.lineTo(width,-i)
			ctx.closePath()
			ctx.stroke()
		}
		ctx.restore()
		ctx.save()
		ctx.strokeStyle = grid.strokeStyle+"55"
		for(let i=0;i<width;i+=grid.span){
			ctx.beginPath()
			ctx.moveTo(i,-height)
			ctx.lineTo(i,height)
			ctx.closePath()
			ctx.stroke()
			ctx.beginPath()
			ctx.moveTo(-i,-height)
			ctx.lineTo(-i,height)
			ctx.closePath()
			ctx.stroke()
		}
		
		for(let i=0;i<height;i+=grid.span){
			ctx.beginPath()
			ctx.moveTo(-width,i)
			ctx.lineTo(width,i)
			ctx.closePath()
			ctx.stroke()
			ctx.beginPath()
			ctx.moveTo(-width,-i)
			ctx.lineTo(width,-i)
			ctx.closePath()
			ctx.stroke()
		}
		ctx.restore()
		//x axios
		ctx.beginPath()
		ctx.moveTo(0,-height)
		ctx.lineTo(0,height)
		ctx.closePath()
		ctx.stroke()
		ctx.save()

		ctx.font=grid.font
		ctx.globalAlpha = 1
		for(let i=0;i<width;i+=grid.span){
			let m=parseInt(i/grid.span)
			i!=0&&ctx.fillText(m,i-12,30)
			i!=0&&ctx.strokeText(m,i-12,30)
			i!=0&&ctx.fillText(-m,-i-12,30)
			i!=0&&ctx.strokeText(-m,-i-12,30)
		}
		for(let i=0;i<height;i+=grid.span){
			let m=parseInt(i/grid.span)
			i!=0&&ctx.fillText(   -m,-40,i+10)
			i!=0&&ctx.strokeText (-m,-40,i+10)
			i!=0&&ctx.fillText(  m,-24,-i+10)
			i!=0&&ctx.strokeText(m,-24,-i+10)
		}
		ctx.restore()
		//y axios
		ctx.beginPath()
		ctx.moveTo(-width,0)
		ctx.lineTo(width,0)
		ctx.closePath()
		ctx.stroke()

		this.drawPoint({
			x:0,y:0,r:6,s:0,e:2*Math.PI,strokeStyle:grid.fillStyle
		},ctx)

		ctx.restore()
	}
}